img{
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.currentLine{
    color: red;
    font-size: 22px !important;

}
.currentMusic{
    background-color: salmon;
    color: red;
}
.playMusicModel{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
    height: 80px;
    background-color: #fff;
    box-shadow: 0 0 8px gray;
    display: flex;
    justify-content: center;
    padding: 5px 20px;
    align-items: center;
    .music-details{
        width: 300px;
        height: 75px;
        display: flex;
        align-items: center;
        .img-box{
            width: 72px;
            height: 72px;
            margin-right: 15px;
            position: relative;
            cursor: pointer;
            .hidden-box{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                width: 40px;
                height: 40px;
                opacity: 0;
                transition: all 0.5s;
            }
            &:hover{
                .hidden-box{
                    opacity: 1;
                }
            }
        }
        .content-box{
            line-height: 34px;
            p{
                font-size: 15px;
                color: #4a4a4a;
                font-weight: 800;
            }
            span{
                color: grey;
                font-size: 13px;
            }
        }
      
    }
    .play-model{
        display: flex;
        width: 150px;
        height: 72px;
        align-items: center;
        >div{
            width: 50px;
            height: 50px;
           cursor: pointer;
        }
    }
    .play-music{
        margin: 0 50px;
        height: 100%;
        .current-time{
            box-sizing: border-box;
            text-align: right;
            height: 38px;
            padding: 7px 19px 0 0;
            font-size: 16px;
            color: gray;
        }
        .progress-bar-warp{
            width: 700px;
            margin: 0 20px;
            .progress-bar{
                width: 100%;
                height: 3px;
                border-radius: 10px;
                background-color: gray;
                .bar-inner{
                    //进度条
                    height: 3px;
                    position: relative;
                    width: 0px;
                    background-color: red;
                    .progress{
                        height: 3px;
                        width: 0px;
                        background-color: red;
                    }
                    .progress-btn{
                        position: absolute;
                        width: 15px;
                        height: 15px;
                        top: -8px;
                        right: 0px;
                        border-radius: 50%;
                        background-color: #fff;
                        border: 2px solid red;
                        transition: all 0.2s;
                        cursor: pointer;
                        &:hover{
                            transform: scale(1.1);
                        }
                    }
                }
            }
        }
        audio{
            width: 800px;
            background-color: white;
            
        }
        
    }
    .musicVoice{
        width: 200px;
        display: flex;
        align-items: center;
       
        .img-box{
            width: 25px;
            height: 25px;
            margin-right: 15px;
            cursor: pointer;
        }
        .controlVoice{
            width: 135px;
        }
    }
    .uesrOperation{
          //临时音乐列表
          display: flex;
          width: 160px;
          justify-content: space-around;
          align-items: center;
    .tempMusicList{
        cursor: pointer;
        .tempMusic-box{
            width: 35px;
            height: 35px;
        }
        .hidden-music-box{
            position: absolute;
            bottom: 90px;
                right: 24px;
            width: 400px;
            height: 580px;
            background-color: #fff;
            color: #fff;
            overflow-y: scroll;
            background: url('../assets/images/临时音乐列表背景.jpg');
            padding: 15px 0px;
            box-shadow:  0 0 8px gray;
            .box-title{
                text-align: center;
                color: #fff;
                font-weight: 800;
                margin-bottom: 20px;
                position: relative;
                .lajitong{
                    position: absolute;
                    top: 0;
                    right: 20px;
                    width: 20px;
                    height: 20px;
                    
                }
            }
            .box-list{
                ul{
                    li{
                        display: flex;
                        justify-content: space-between;
                        background-color: rgba($color: #000000, $alpha: 0.5);
                        padding: 15px 10px;
                        cursor: pointer;
                        p{
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                        .item-name{
                            width: 150px;
                        }
                        .item-artists{
                            width: 100px;
                        }
                        .item-time{
                            width: 47px;
                            .img-box{
                                width: 25px;
                                height: 25px;
                                background: url('../assets/images/musicing.gif') no-repeat;
                                background-position: 9px -16px;
                            }
                        }
                        &:hover{
                            color: saddlebrown;
                            background-color: rosybrown;
                        }
                    }
                }
            }
        }
    }
    //歌词盒子
    .lyric-box{
       cursor: pointer;
        .lyric{
          
            width: 35px;
            height: 35px;

            .hidden-lyricBox{
                position: absolute;
                bottom: 90px;
                right: 24px;
                width: 360px;
                height: 580px;
                background-color: #fff;
                color: gray;
                overflow-y: scroll;
                padding: 15px;
                text-align: center;
            box-shadow:  0 0 8px gray;
                
              
                h3{
                    text-align: center;
                    font-size: 20px;
                    margin-bottom: 20px;
                    background-color: #fff;
                }
                .lyric-info{
                    overflow: hidden;
                   
                    .lineLyric{
                        transform: translateY(0px);
                        transition: all 0.5s;
                        span{
                            display: block;
                            height: 26px;
                        line-height: 26px;
                        font-size: 15px;
                        margin-bottom: 16px;
                        }
                    }
                  
                }
              
            }
        }
    }
    }
  
}